<template>
<div class="my-dynamic">
  <div class="left">
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
    >
      <el-menu-item index="1">
        <span>全部</span>
      </el-menu-item>
      <el-menu-item index="2">
        <span>视频</span>
      </el-menu-item>
    </el-menu>
  </div>
  <div class="center">
      <DynamicList width="900"></DynamicList>
  </div>
  <div class="right">
    <div class="right-aside">
      <div class="personal-data">
        <div class="header">
          <div class="title">
            个人资料
          </div>
          <div class="edit">
            编辑 &nbsp;>
          </div>
        </div>
        <div class="uid">
          455221399
        </div>
        <div class="birthday">
          10-07
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script setup>

import DynamicList from "@/components/DynamicList.vue";
</script>
<style lang="scss" scoped>
.my-dynamic{
  display: flex;
  .left{
    width: 170px;
    height: 200px;
    //background-color: red;
    margin-right: 15px;
  }
  .center{
    width: 920px;
    height: 200px;
    //background-color: #5083ff;
    .card{
      border-radius: 2px;
      box-shadow: 0 0 5px 0 #ccc;
      padding:10px
    }
  }
  .right{
    .right-aside{
      width: 280px;
      //background-color: #b61515;
      height: 100px;
      padding-left: 25px;
      .personal-data{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border-radius: 5px;
        font-size: 13px;
        background-color: #ececec;
        padding: 15px;
        .header{
          .title{
            font-size: 14px;
          }
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>